<template>
	<view class="modifyorder">
		<view class="whole">
			<!-- 头部金额 -->
			<view class="order_money">
				<view class="money">￥{{OrderDetail.yf_jine}}</view>
				<view class="money_tit">订单金额</view>
				<view class="money_inp">
					<text>指定金额</text>
					<input type="text" v-model="money_inp" placeholder="请输入目标金额">
				</view>
			</view>
			<!-- 订单区域 -->
			<view class="order_region">
				<view class="order_region_tit">订单区域</view>
				<view class="address_choice">
					<picker class="xiala" @change="bindPickerChange" :value="indexArr" :range="areaListArr">
						<view class="uni-input" v-if="order_regionID" style="color: #A4A8B7;font-size: 28upx;">{{areaListArr[indexArr]}}</view>
						<view class="uni-input" v-else style="color: #A4A8B7;font-size: 28upx;">请选择订单区域</view>
						
					</picker>
					<uni-icons type="arrowright" size="18" style=" color: #87888a;float: right;margin-left: 20upx;"></uni-icons>
				</view>
			</view>
			<!-- 服务内容 -->
			<view class="service_content">
				<view class="remarks_tit">
					<view class="tit_1">服务内容</view>
					<view class="tit_2" @click="addServer">新增</view>
				</view>
				<view class="service_list" v-for="(item,i) in serve_list" :key="i"> 
					
					<view class="service_img">
						<img :src="item.page_img_url" alt="">
						<view class="li_right">
							<view class="right_text_1">{{item.serve_name}}</view>
							<view class="right_text_2">{{item.specs_name}}</view>
							<view class="right_text_3">{{item.specs_price}}</view>
						</view>
					</view>
					
					<view class="Datail_addres">
						<view class="addres_info">
							<text class="text_1">服务时长</text>
							<text class="text_2">{{item.serve_time}}小时</text>
						</view>
						<view class="addres_info">
							<text class="text_1">上门时间</text>
							<text class="text_2">{{item.visit_time}}</text>
						</view>
						<view class="addres_info">
							<text class="text_1">服务人员</text>
							<view class="text_3" v-if="item.serve_personArr&&item.serve_personArr.length>0">
								<view class="text_2" v-for="(item2,i2) in item.serve_personArr" :key="i2">{{item2}}</view>
								<!-- <view class="text_2">刘阿姨（员工ID：123456）</view> -->
							</view>
							<view class="text_3" v-else>
								<view class="text_2" v-for="(item2,i2) in item.serve_person" :key="i2">{{item2}}</view>
								<!-- <view class="text_2">刘阿姨（员工ID：123456）</view> -->
							</view>
							
						</view>
					</view>
					<view class="sever_btn">
						<view class="btn btn_1" @click="editServer(item)">指派/修改</view>
						<view class="xian"></view>
						<view class="btn btn_2" @click="deleteServer(item,i)">移除</view>
					</view>
				</view>
				
			</view>
			
			<!-- 备注 -->
			<view class="modify_remarks">
				<view class="remarks_tit">
					<view class="tit_1">备注</view>
					<view class="tit_2" @click="goRemark">编辑</view>
				</view>
				<view class="remarks_remarks">{{OrderDetail.remark}}</view>
			</view>
		</view>
		
		<view class="bottomPart">
		    <view class="part_1">取消</view>
		    <view class="part_2" @click="editOrder">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
	    data(){
	        return{
	            money_inp:'',
				//选择地址
				areaListArr:[],   //区域列表
				areaListArr2:[],   //区域列表
				indexArr:'',
				
				order_regionID:'',//区域ID
				OrderDetail:{},
				serve_list:[],
				oid:''
				
	        }
	    },
	    onLoad(options){
			this.oid = options.oid
			this.mOrderDetail()
			
			// this.$store.dispatch("mOrderDetail",{oid:options.oid}).then(res=>{
			// 	if(res.code==1){
			// 		this.OrderDetail = res.data;
			// 		this.serve_list = res.data.serve_list;
			// 		this.areaList()
			// 	}
			// })
		},
		onUnload(){
			// console.log("卸载页面了")
			uni.$off("remark")  
			 uni.$off("getModifyOrder")  
		},
		mounted() {
			// this.areaList()
			uni.$on("getModifyOrder",res=>{
				console.log(res,'获取修改后的服务内容')
				if(res.isEdit){
					console.log("进来")
					this.serve_list.map((item,index)=>{
						//console.log(item.od_id +''==res.service_list[0].od_id +'',item.od_id,res.service_list[0].od_id,"进来222")
					if(item.od_id+''==res.service_list[0].od_id+''){
						//item = res.service_list[0]
						
						this.$set(this.serve_list,index,res.service_list[0])
					}
				})
				}else{
					this.serve_list.push(res.service_list[0])
				}
				
				//console.log(this.serve_list,'?????')
			})
		},
	    methods:{
			mOrderDetail(){
				this.$store.dispatch("mOrderDetail",{oid:this.oid}).then(res=>{
					if(res.code==1){
						this.OrderDetail = res.data;
						this.serve_list = res.data.serve_list;
						this.areaList()
						this.money_inp=this.OrderDetail.yf_jine
					}
				})
			},
			getParms(){
				this.serve_list.map(item=>{
					item.serve_type=3
					if(!Array.isArray(item.serve_person)){
						item.serve_person = Object.keys(item.serve_person)
					}
					
				})
				let obj={
					oid:this.oid,//订单ID
					qu_id:this.order_regionID,//区域ID
					yf_jine:this.money_inp,//指定金额
					remark:this.OrderDetail.remark,//备注
					service_list:this.serve_list
				}
				return obj
			},
			editOrder(){//编辑订单
				// this.serve_list.map(item=>{
				// 	item.serve_type=3
				// 	if(!Array.isArray(item.serve_person)){
				// 		item.serve_person = Object.keys(item.serve_person)
				// 	}
					
				// })
				// console.log(this.serve_list)
				// let obj={
				// 	oid:this.oid,//订单ID
				// 	qu_id:this.order_regionID,//区域ID
				// 	yf_jine:this.money_inp,//指定金额
				// 	remark:this.OrderDetail.remark,//备注
				// 	service_list:this.serve_list
				// }
				let obj = this.getParms();
				if(!obj.yf_jine){
					uni.showToast({
                        title: `请选择指定金额`,
                        icon: "none",
                    });
                    return false
				}else{
					this.$store.dispatch("mOrderUpdate",obj).then(res=>{
                        // console.log(res)
                        if(res.code==1){
                           uni.showToast({
								title: res.msg,
								icon: "none",
							});
							setTimeout(() => {
								this.mOrderDetail()
							}, 100);
                        }
                    })
				}
				console.log(obj)
			},
			editServer(item){//编辑服务
				let obj = this.getParms();
				obj.service_list2=item
				uni.navigateTo({
					url:
				`/pages/order/createOrder/create1?oid=${this.OrderDetail.oid}&od_id=${item.od_id}&qu_id=${this.order_regionID}&uid=${this.OrderDetail.uid}&pid=${item.pid}&parms=${JSON.stringify(obj)}`
				})
			},
			deleteServer(item,i){
				this.serve_list.splice(i,1)
			},
			addServer(){//新增
				uni.navigateTo({
					url:`/pages/order/createOrder/create1?oid=${this.OrderDetail.oid}&qu_id=${this.order_regionID}&uid=${this.OrderDetail.uid}`
				})
			},
			goRemark(){
				uni.$on('remark',(res)=>{
					this.OrderDetail.remark = res    
				})
				uni.navigateTo({
					url:"/pages/order/createOrder/remark?mark="+this.OrderDetail.remark
				})
			},
			
			areaList(){//获取区域列表
				this.$store.dispatch("areaList").then(res=>{
					if(res.code==1){
						// console.log(res)
						this.areaListArr = Object.values(res.data.area_list)
						this.areaListArr2 = Object.keys(res.data.area_list)
						this.indexArr = this.areaListArr2.indexOf(`${this.OrderDetail.address.qu_id}`)
						this.order_regionID = `${this.OrderDetail.address.qu_id}`;
						//console.log(this.areaListArr2.indexOf(`${this.OrderDetail.address.qu_id}`),this.indexArr,'???',this.OrderDetail.address.qu_id)
					}
				})
			},
			bindPickerChange: function(e) {
				this.indexArr = e.target.value
				this.order_regionID = this.areaListArr2[e.target.value]
				console.log(this.order_regionID)
			},
	    },
		
	}
</script>

<style lang="less">
	.modifyorder{
		.whole{padding-bottom:200rpx;}
		.order_region{
			.order_region_tit{
				padding:0 30upx;
				line-height:80upx;
				font-size:30upx;
			}
			.address_choice{
				height:80upx;
				background:#fff;
				padding:0 30upx;
				display:flex;
				align-items:center;
				font-size:30upx;
				justify-content:space-between;
				color:#929292;
				display:flex;
				.xiala{
					flex:1;
					line-height:80upx;
				}
			}
		}
		.order_money{
			background:#fff;
			text-align:center;
			.money{color:#0077ff;font-size:40upx;line-height:80upx;}
			.money_tit{color:#929292;font-size:30upx;}
			.money_inp{
				margin-top:20upx;
				display:flex;
				align-items:center;
				justify-content:space-between;
				padding:0 30upx;
				color:#929292;
				font-size:30upx;
				height:80upx;
				text{width: 80px;}
				input{flex:1;text-align:right;font-size:28upx;}
			}
		}
		
		.service_content{
			.remarks_tit{
				display:flex;
				justify-content:space-between;
				padding:0 30upx;
				line-height:80upx;
				.tit_1{font-size:30upx;}
				.tit_2{font-size:26upx;color:#0077ff;}
			}
			.service_list{
				background:#fff;
				margin-bottom:20upx;
				.service_img{
					padding:30upx;
					box-sizing:border-box;
					width:100%;
					display:flex;
					display: -webkit-box;
					justify-content:space-between;
					img{width:128upx;height:128upx;border-radius:10upx;margin-right:26upx;display:block;}
					.li_right{
						flex:1;
						view{line-height:42upx;}
						.right_text_1{
							font-size:26upx;
							color:#000000;
							overflow:hidden;
							text-overflow:ellipsis;
							white-space:nowrap;
						}
						.right_text_2{font-size:24upx;color:#929292;}
						.right_text_3{font-size:24upx;color:#000000;}
					}
				}
				.Datail_addres{
					background:#fff;
					border-bottom:2upx solid #F7F7F7;
					padding:0 30upx;
					.addres_info{
						line-height:64upx;
						display:flex;
						justify-content:space-between;
						text{font-size:26upx;}
						.text_1{color:#929292;width:160upx;}
						.text_2{color:#000000;flex:1;text-align:right;display:block;}
						.text_3{color:#000000;font-size:26upx;}
					}
				}
				.sever_btn{
					display:flex;
					height:80upx;
					font-size:28upx;
					justify-content:space-between;
					align-items:center;
					.btn{flex:1;text-align:center;line-height:80upx;}
					.btn_1{color:#0077ff;}
					.btn_2{color:#F04559;}
					.xian{
						width:2upx;
						height:40upx;
						background:#F7F7F7;
					}
				}
			}
		}
		.modify_remarks{
			.remarks_tit{
				display:flex;
				justify-content:space-between;
				padding:0 30upx;
				line-height:80upx;
				.tit_1{font-size:30upx;}
				.tit_2{font-size:26upx;color:#0077ff;}
			}
			.remarks_remarks{
				background:#fff;
				width:100%;
				height:200upx;
				padding:30upx;
				box-sizing:border-box;
				font-size:26upx;
				color:#929292;
				line-height:40upx;
			}
		}
		.bottomPart{
		    position: fixed;
		    bottom: 0;
		    width: 100%;
		    background: #fff;
		    height: 160rpx;
		    display: flex;
		    justify-content: end;
		    justify-content: flex-end;
		    view{
		        font-size: 28rpx;
		        margin: 20rpx;
				width: 180rpx;
				line-height: 60rpx;
				height:60rpx;
				text-align: center;
				border-radius: 30rpx;
		    }
			.part_1{
				border:2rpx solid #0077ff;
				color:#0077ff;
			}
			.part_2{
			    background: #0077ff;
			    border:2rpx solid #0077ff;
			    color: #fff;
			}
			
		}
	}
</style>
